Merge branch 'master' of https://github.com/coinos/coinos-ui into notificationsnotifications

2 files changed, 61 insertions, 25 deletions

diff --git a/src/routes/(app)/payment/[id]/+page.server.js b/src/routes/(app)/payment/[id]/+page.server.js
index cbd7355e..1c90ab69 100644
--- a/src/routes/(app)/payment/[id]/+page.server.js
+++ b/src/routes/(app)/payment/[id]/+page.server.js
@@ -1,6 +1,6 @@
 import { auth, get } from '$lib/utils';
 
 export async function load({ cookies, params }) {
-	let tx = await get(`/payments/${params.id}`, auth(cookies));
-	return { tx };
+	let payment = await get(`/payments/${params.id}`, auth(cookies));
+	return { payment };
 }
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index a961d14d..2e170a43 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -1,62 +1,98 @@
 <script>
 	import { t } from '$lib/translations';
-	import { back, copy, f, s, sats } from '$lib/utils';
+	import { back, copy, f, s, fiat, sats } from '$lib/utils';
 	import { Avatar, Icon } from '$comp';
 	import { format } from 'date-fns';
 	import { PUBLIC_EXPLORER as expl } from '$env/static/public';
 
 	export let data;
-	let { user, tx } = data;
+	let { user, payment: p } = data;
 	let { username } = user;
-	let { id, amount, created, rate, type, ref, fee, currency } = tx;
-	fee = fee || 0;
+	let { id, amount, created, rate, type, ref, tip, ourfee, fee, currency } = p;
+	let a = Math.abs(amount);
 
-	let fiat = (Math.abs(amount) * rate) / sats;
+	fee = fee || 0;
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<div class="container mx-auto max-w-lg px-4 space-y-2 sm:space-y-5 break-all">
+<div class="container mx-auto max-w-lg px-4 space-y-8 break-all text-2xl">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
 		{$t(amount < 0 ? 'payments.sent' : 'payments.received')}
 	</h1>
 
+	{#if p.with}
+		<div>
+			<span class="text-lg text-secondary my-auto mr-2">{amount > 0 ? 'From' : 'To'}</span>
+			<a href={`/${p.with.username}`}>
+				<div class="flex">
+					<div class="my-auto">
+						<Avatar user={p.with} size={20} />
+					</div>
+					<div class="my-auto ml-1">{p.with.username}</div>
+				</div>
+			</a>
+		</div>
+	{/if}
+
 	<div>
-		<div class="font-bold">{$t('payments.amount')}</div>
-		<div class="text-xl">
-			{f(fiat, currency)}
-			<span class="text-secondary">⚡️{`${s(Math.abs(amount) + fee)}`}</span>
+		<span class="text-lg text-secondary">Amount</span>
+		<div>
+			{f(fiat(a, rate), currency)}
+			{#if tip}
+				<span class="text-lg">
+					+ {f(fiat(tip, rate), currency)}
+				</span>
+			{/if}
+			<span class="text-secondary"
+				>⚡️{`${s(a)}`}
+
+				{#if tip}
+					<span class="text-lg">
+						+ ⚡️{s(tip)}
+					</span>
+				{/if}
+			</span>
 		</div>
 	</div>
 
 	<div>
-		<div class="font-bold">{$t('payments.date')}</div>
+		<span class="text-lg text-secondary">Network fee</span>
 		<div>
-			{format(new Date(created), 'MMMM d')},
-			{format(new Date(created), 'h:mm aaa')}
+			{f(fiat(fee, rate), currency)}
+			<span class="text-secondary">⚡️{`${s(fee)}`}</span>
 		</div>
 	</div>
 
-	{#if type === 'lightning'}
+	{#if ourfee > 0}
 		<div>
-			<div class="font-bold">{$t('payments.preimage')}</div>
+			<span class="text-lg text-secondary">Platform fee</span>
 			<div>
-				{ref}
+				{f(fiat(ourfee, rate), currency)}
+				<span class="text-secondary">⚡️{`${s(ourfee)}`}</span>
 			</div>
 		</div>
-	{:else}
+	{/if}
+
+	<div>
+		<span class="text-lg text-secondary">Date</span>
+		<div>
+			{format(new Date(created), 'MMMM d')},
+			{format(new Date(created), 'h:mm aaa')}
+		</div>
+	</div>
+
+	{#if type === 'bitcoin'}
 		<div>
-			<div class="font-bold">{$t('payments.id')}</div>
+			<span class="text-lg text-secondary">Txid</span>
 			<div class="flex">
 				<div>
-					<a href={`${expl}/tx/${id}`} target="_blank" rel="noreferrer" class="text-blue-600"
-						>{id}</a
-					>
+					<a href={`${expl}/tx/${id}`} target="_blank" rel="noreferrer">{id}</a>
 				</div>
-				<button class="flex font-bold hover:opacity-80 mb-auto" on:click={() => copy(id)}
-					><Icon icon="copy" style="mr-1" />
+				<button class="flex font-bold hover:opacity-80 mb-auto my-auto" on:click={() => copy(id)}
+					><Icon icon="copy" style="ml-2 w-20 my-auto" />
 				</button>
 			</div>
 		</div>